import {Button, Dropdown, Input} from "antd";
import HttpRequestUtils from "../../utils/HttpRequestUtils";
import gengzpMqApis from "../../apis/apis";
import {useEffect, useState} from "react";

const MessageQuery = (props) => {

    const queryStyle = {
        display: 'flex',
        alignItems: 'center'
    }

    const {
        messageApi,
        pageQueryMessageParam,
        setPageQueryMessageParam,
        clearPageQueryParam,
        pageQueryMessageInfo,
        pageQueryMessage,
        pageQueryDeathMessage
    } = props;

    // 所有topic名称
    const [allTopicNames, setAllTopicNames] = useState([]);
    // topic状态下拉框
    const [topicStatusDropdown, setTopicStatusDropdown] = useState([
        {
            code: 0,
            value: "未消费"
        },
        {
            code: 1,
            value: "消费中"
        },
        {
            code: 2,
            value: "消费完成"
        },
        {
            code: 3,
            value: "消费失败"
        }
    ]);

    useEffect(() => {
        queryAllTopicNames();
    }, []);

    useEffect(() => {
        pageQueryMessage();
    }, [pageQueryMessageParam.pageNum])

    /**
     * 查询所有的topic名称
     */
    const queryAllTopicNames = () => {
        HttpRequestUtils.post(gengzpMqApis.queryAllTopicName, {}).then(res => {
            if (res.code === 200) {
                setAllTopicNames(res.data);
            }
        })
    }

    return (
        <div>
            <div style={{display: 'flex', flexWrap: 'wrap'}}>
                <div style={{display: 'flex'}}>
                    <div style={queryStyle}>主题：</div>
                    <div style={queryStyle}>
                        <Dropdown
                            menu={{
                                items: allTopicNames.map(item => (
                                    {
                                        key: item,
                                        label: (
                                            <a onClick={() => {
                                                setPageQueryMessageParam({
                                                    ...pageQueryMessageParam,
                                                    topic: item
                                                });
                                            }}>
                                                {item}
                                            </a>
                                        )
                                    }
                                ))
                            }}
                        >
                            <Input
                                placeholder="请选择topic"
                                style={{width: '200px'}}
                                value={props.pageQueryMessageParam.topic}
                                onClick={() => {
                                    setPageQueryMessageParam({
                                        ...pageQueryMessageParam,
                                        topic: ''
                                    });
                                }}
                            />
                        </Dropdown>
                    </div>
                </div>

                <div style={{display: 'flex', marginLeft: '15px'}}>
                    <div style={queryStyle}>消息Key：</div>
                    <div style={queryStyle}>
                        <Input
                            placeholder="请输入消息Key"
                            style={{width: '350px'}}
                            value={props.pageQueryMessageParam.messageKey}
                            onChange={(e) => {
                                setPageQueryMessageParam({
                                    ...pageQueryMessageParam,
                                    messageKey: e.target.value
                                });
                            }}
                        />
                    </div>
                </div>

                <div style={{display: 'flex', marginLeft: '15px'}}>
                    <div style={queryStyle}>消息状态：</div>
                    <div style={queryStyle}>
                        <Dropdown
                            menu={{
                                items: topicStatusDropdown.map(item => (
                                    {
                                        key: item.code,
                                        label: (
                                            <a onClick={() => {
                                                setPageQueryMessageParam({
                                                    ...pageQueryMessageParam,
                                                    status: item.code,
                                                    statusValue: item.value
                                                });
                                            }}>
                                                {item.value}
                                            </a>
                                        )
                                    }
                                ))
                            }}
                        >
                            <Input
                                placeholder={"请选择消息消费状态"}
                                value={props.pageQueryMessageParam.statusValue}
                                onClick={() => {
                                    setPageQueryMessageParam({
                                        ...pageQueryMessageParam,
                                        status: '',
                                        statusValue: ''
                                    });
                                }}
                            />
                        </Dropdown>
                    </div>
                </div>

                <div style={{display: 'flex', marginLeft: '15px'}}>
                    <div style={queryStyle}>消息内容：</div>
                    <div style={queryStyle}>
                        <Input
                            placeholder="请输入消息内容"
                            style={{width: '350px'}}
                            value={props.pageQueryMessageParam.messageContent}
                            onChange={(e) => {
                                setPageQueryMessageParam({
                                    ...pageQueryMessageParam,
                                    messageContent: e.target.value
                                });
                            }}
                        />
                    </div>
                </div>
            </div>

            <div style={{marginTop: '15px', display: 'flex'}}>
                <div>
                    <Button
                        onClick={() => {
                            clearPageQueryParam();
                        }}
                        danger={true}
                    >
                        清空条件
                    </Button>
                </div>
                <div>
                    <Button
                        type={'primary'}
                        style={{marginLeft: '15px'}}
                        onClick={() => {
                            pageQueryMessage();
                        }}
                    >
                        查询全部消息
                    </Button>
                </div>
                <div>
                    <Button
                        style={{marginLeft: '15px', backgroundColor: '#FF3333'}}
                        onClick={() => {
                            pageQueryDeathMessage();
                        }}
                    >
                        <span style={{fontWeight:'bolder', color: 'white'}}>查询死信队列</span>
                    </Button>
                </div>
                <div style={{display: 'flex', marginLeft: '20px'}}>
                    <Button
                        onClick={() => {
                            if (pageQueryMessageParam.pageNum <= 1) {
                                messageApi.error('已经是第一页了');
                            } else {
                                setPageQueryMessageParam({
                                    ...pageQueryMessageParam,
                                    pageNum: pageQueryMessageParam.pageNum - 1
                                });
                            }
                        }}
                    >
                        上一页
                    </Button>
                    <div style={{display: 'flex', alignItems: "center", fontSize: '15px', margin: '0 15px'}}>
                        <span>共</span>
                        <span style={{
                            margin: '0 5px',
                            fontWeight: ' bolder',
                            color: 'red'
                        }}>{pageQueryMessageInfo.total}</span>
                        <span>条数据，当前为第</span>
                        <span style={{
                            margin: '0 5px',
                            fontWeight: ' bolder',
                            color: 'red'
                        }}>{pageQueryMessageParam.pageNum}</span>
                        <span>页</span>
                    </div>
                    <Button onClick={() => {
                        if (pageQueryMessageParam.pageNum >= pageQueryMessageInfo.pageCount) {
                            messageApi.error('已经是最后一页了');
                        } else {
                            setPageQueryMessageParam({
                                ...pageQueryMessageParam,
                                pageNum: pageQueryMessageParam.pageNum + 1
                            });
                        }
                    }}>
                        下一页
                    </Button>
                </div>
            </div>
        </div>
    )
}

export default MessageQuery;